<script lang="ts">
    import Cell from "./Cell.svelte";

    const props = $props();

    const hour = $derived.by(() => {
        return props.value && props.value.get("hours");
    });
    const minute = $derived.by(() => {
        return props.value && props.value.get("minutes");
    });
    const second = $derived.by(() => {
        return props.value && props.value.get("seconds");
    });

    const hasHour = $derived.by(() => {
        return props.format.indexOf("H") > -1;
    });
    const hasMinute = $derived.by(() => {
        return props.format.indexOf("m") > -1;
    });
    const hasSecond = $derived.by(() => {
        return props.format.indexOf("s") > -1;
    });
</script>

<div class="cm-time-picker-pane">
    {#if props.header}
        <div class="cm-time-picker-header">
            {#if typeof props.header === "function"}
                {@render props.header()}
            {:else}
                {props.header}
            {/if}
        </div>
    {/if}
    <div class="cm-time-picker-options">
        {#if hasHour}
            <Cell max={24} type="hour" value={hour} step={props.hourStep} name={props.name} onSelectTime={props.onSelectTime} />
        {/if}
        {#if hasMinute}
            <Cell max={60} type="minute" value={minute} step={props.minuteStep} name={props.name} onSelectTime={props.onSelectTime} />
        {/if}
        {#if hasSecond}
            <Cell max={60} type="second" value={second} step={props.secondStep} name={props.name} onSelectTime={props.onSelectTime} />
        {/if}
    </div>
    {#if props.footer}
        <div class="cm-time-picker-footer">
            {#if typeof props.footer === "function"}
                {@render props.footer()}
            {:else}
                {props.footer}
            {/if}
        </div>
    {/if}
</div>
